e<!--
	侧边tab切换组件
	Created by Penglei on 2023/08/17
-->
<template>
	<div class="side-tab">
		<ul class="side-tab-list">
			<li v-for="(item, index) in props.list" :key="index" class="side-tab-item"
				:class="{ active: props.active == item.value }" @click="onClick(item)">
				{{ item.label || '' }}
			</li>
		</ul>
	</div>
</template>

<script setup name="SideTab">
import { watch } from "vue";

// 组件事件监听
const emit = defineEmits(['update:active', 'change']);
// 父组件传参
const props = defineProps({
	active: {
		type: String,
		default: () => ''
	},
	// 列表
	list: {
		type: Array,
		required: true,
		default: () => []
	}
});
// 每项点击事件
const onClick = (item) => {
	// 触发父组件事件
	emit('update:active', item.value);
	emit('change', item);
}
</script>

<style lang="scss" scoped>
.side-tab {
	position: absolute;
	left: -25px;
	top: -62px;
	width: 25px;
	font-size: 12px;
	color: #FFFFFF;

	&-list {
		margin: 0;
		padding: 0;
	}

	&-item {
		line-height: 1;
		width: 100%;
		cursor: pointer;
		padding: 8px 6px;
		text-align: center;
		white-space: pre-wrap;
		background: url('@/assets/images/basicData/bg-side.png') no-repeat center;
		background-size: 100% 100%;

		&.active,
		&:hover {
			color: #46FFFF;
			background: url('@/assets/images/basicData/bg-side-active.png') no-repeat center;
		}
	}
}
</style>